<template>
<div class="container" v-title data-title="我的行程">
    <div class="contSingleList">
        <Vscroll :on-refresh="onRefresh" :on-infinite="onInfinite" :dataList="scrollData">
            <ul class="listItem">
                <!-- <li v-for="(item,index) in listdata">
                    <span>{{ item.date }}</span>
                    <span>{{ item.portfolio }}</span>
                    <span :class="{'state0':(item.state===0),'state1':(item.state==1),state2:(item.state===2)}"  >{{ item.drop }}</span>
                </li> -->
                <li v-for="(item,index) in listdata">
                    <p class="time-money">{{item.createTime}}<span class="right-money">￥{{item.cashFee}}</span></p>
                    <p class="origin"><i></i>{{item.startGridName}}</p>
                    <p class="destination"><i></i>{{item.endGridName}} <span class="right-state">进行中</span></p>
                </li>
            </ul>
        </Vscroll>
    </div>
    <simplert ref="simplert"></simplert>
    
</div>
</template>
<script>
// 
    import Vscroll from '../../components/pull-refresh/pull-refresh.vue';

    import Simplert from '../../components/dialog/dialog.vue';

    console.log(Vscroll);
    export default {
        data() {
            return {
                pages:7, //当前页
                num: 10, // 一页显示多少条
                pageStart: 0, // 开始页数
                pageEnd: 0, // 结束页数
                listdata: [], // 下拉更新数据存放数组
                scrollData: {
                    noFlag: false //暂无更多数据显示
                },
                state:true
            }
        },
        components: {
           Vscroll,
           Simplert
        //    Loading
        },
        mounted: function() {
            
            let that = this;
            // 获取token
            // this.$util.getUserToken().then(token=>{
            //     that.token = token;
            // })
        this.getList();
        },
        methods: {
            open (title, message, type) {
                let obj = {
                title: title,
                message: message,
                type: type
                }
                this.$refs.simplert.openSimplert(obj)
            },
            getList() {
                const that = this;
                let more = this.$el.querySelector('.load-more')
                if(this.state){

                    that.$api.post('/myOrder/v1/authApi/myOrder/list?page='+this.pages+'&rows='+this.num,{},s=>{
                        let data= s.module.list;
                        console.log(data);
                        if(this.pages == 1){
                            console.log(1,this.listdata)
                            this.listdata = '';
                            this.listdata = data;
                        }else{
                            console.log(data.length)
                            if(data.length == 10){
                                this.listdata = this.listdata.concat(data);
                                // more.style.display = 'none'; 
                            }else{
                                this.listdata = this.listdata.concat(data);
                                this.scrollData.noFlag = true;
                                more.style.display = 'none'; 
                                this.state=false;
                            }
                        }
                        setTimeout(function(){
                        },500)
                        
                    },f=>{
                        that.open('列表获取失败',false,'','','fade_alert',function(){});
                    },{
                        'requestPlatform': that.wx_app,
                        'token': 'eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWNhciIsImFwcGtleSI6IjE3NjAyMTE4ODY5Iiwic2VjcmV0IjoiMmJmMmQ3MDkyZGFkNTFhMzI0ZTk0YWQwN2Q2ODJkZjQifQ.Ux0IFWSJK0lOrVNUc0Yd6X41rqVS7uJXxMciPOy4rmw'
                    })
                }else{
                    more.style.display = 'none';
                    that.scrollData.noFlag = true;
                }
            },
            onRefresh(done) {
                this.pages = 1;
                this.getList();

                done(); // call done 

            },
            onInfinite(done) {
                this.pages++;
                this.getList();
                done();
            }

        }
    }
</script>
<style>
 html,body{
        height:100%;
    }

</style>

<style scoped>
  @import "../styles/styles.css";
    .contSingleList{
        width:100%;
        height:100%;
    }
    .listItem{
        overflow-y: auto;
        width:100%;
        margin:0;
        padding:0;
    }
    .listItem li{
        height:1.94rem;
        margin:0 0.43rem;
        /* border:1px solid red; */
        /* border-top:1px solid #ededed; */
        border-bottom:1px solid #ededed;
    }
    .time-money{
        margin-top:0.28rem;
        font-size:0.30rem;
        line-height:0.53rem;
        color:#2b2b2b;
    }
    .time-money span{
        float:right;
        font-weight:600;
    }
    .origin,.destination{
        height:0.41rem;
        font-size:0.24rem;
        line-height:0.41rem;
        color:#888;
    }
    .origin i,.destination i{
        display: inline-block;
        width:0.07rem;
        height:0.41rem;
        margin-right:0.1rem;
        vertical-align: middle;
        background: url('../styles/asset/journey.png') no-repeat ;
        background-position:100% 0%;
        background-size:100% 200%;
    }
    .destination i{
        background: url('../styles/asset/journey.png') no-repeat;
        background-position:100% 98%;
        background-size:100% 200%;
    }
    .destination span{
        float:right;
        width:0.8rem;
        height:0.33rem;
        margin-top:0.04rem;
        text-align:center;
        line-height:0.33rem;
        border:1px solid #ff5d2e;
        color:#ff5d2e;

    }
</style>
